﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>在线调试</title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="dist/css/layui.css" />
    <link rel="stylesheet" href="css/soulTable.css" />
    <script type="text/javascript" src="dist/layui.js"></script>
</head>

<body>
    <table id="myTable" lay-filter="test"></table>
    <script type="text/html" id="myBar">
    <div>
        <button type="button" title="合并选中的影像" class="layui-btn" >合并</button>
    </div>
</script>
    <script>
        // 自定义模块
        layui.config({
            base: 'ext/',   // 模块目录
            version: 'v1.5.21'
        }).extend({             // 模块别名
            soulTable: 'soulTable'
        });
        layui.use(['form', 'table', 'soulTable'], function () {
            var table = layui.table,
                form = layui.form,
                soulTable = layui.soulTable;

            var myTable = table.render({
                id: 'myTable',
                elem: '#myTable'
                , url: 'http://118.178.140.168:8888/map/data/layers/demo.json'
                , toolbar: '#myBar'
                , rowDrag: true
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , done: function (res, curr, count) {
                    // 隐藏列
                    $(".layui-table-box").find("[data-field='id']").css("display", "none");
                }
                , cols: [[
                    { type: 'checkbox', title: '##', fixed: 'left' },
                    { field: 'id', title: '序号', width: '8%' },
                    { field: 'imgUrl', title: '影像', width: '20%' },
                    { field: 'satellite', title: '卫星', width: '8%' },
                    { field: 'sensor', title: '传感器', width: '8%' },
                    { field: 'time', title: '采集时间', edit: 'text', width: '20%' },
                    { field: 'cloud', title: '云量', width: '20%' },
                    { field: 'resolution', title: '分辨率', minWidth: 100 },
                ]]
                , page: true
                , done: function () {
                    soulTable.render(this)
                }
            });

            // 监听合并事件
            $('.layui-btn').on('click', function () {
                var selectData = layui.table.checkStatus('myTable').data;//goods-table是table的id
                console.log(selectData);
            })
            // 选中记录
            table.on('checkbox(test)', function (obj) {
                console.log('version: 202012171451');
                console.log(obj.checked); //当前是否选中状态
                console.log(obj.data); //选中行的相关数据
                console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
                console.log(table.checkStatus('myTable').data); // 获取表格中选中行的数据

                //var selectData = layui.table.checkStatus('myTable').data;//goods-table是table的id
                //console.log(selectData);
            });
        })
    </script>
    <style>

    </style>
</body>

</html>